<template>
    <div>
        <el-dialog :title="form.id > 0 ? '编辑' : '添加'" :visible.sync="info.isShow" @close="reset">
            <el-form :model="form" :data="secklist" :rules="rules" ref="dialog">

                <el-form-item label="活动名称" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off" placeholder="活动名称"></el-input>
                </el-form-item>

                <el-form-item label="一级分类" prop="first_cateid" :label-width="formLabelWidth">
                    <el-select v-model="form.first_cateid" @change="First" placeholder="请选择一级分类">
                        <el-option v-for="item in catelist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" prop="second_cateid" :label-width="formLabelWidth">
                    <el-select v-model="form.second_cateid" @change="Second" placeholder="请选择二级分类">
                        <el-option v-for="item in two" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="活动商品" prop="goodsid" :label-width="formLabelWidth">
                    <el-select v-model="form.goodsid" placeholder="请选择活动商品">
                        <el-option v-for="item in GoodArr" :key="item.id" :label="item.goodsname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="开始时间" prop="begintime" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.begintime" type="datetime" placeholder="请选择开始时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间" prop="endtime" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.endtime" type="datetime" placeholder="请选择结束时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="菜单状态" prop="status" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { mapState, mapActions } from 'vuex';
export default {
    props: ["info"],
    computed: {
        ...mapState("seckill", ["secklist"]),
        // cate的
        ...mapState('cate', ['catelist'])
    },
    mounted() {
        // 调用
        this.getsecklist();
        this.getcatelist();
    },
    data() {
        return {
            form: {
                title: '',
                status: '',
                first_cateid: '',
                second_cateid: '',
                goodsid: "",
                begintime: '',
                endtime: ''
            },
            rules: {
                first_cateid: { required: true, message: "请选择一级分类", trigger: "blur" },
                second_cateid: { required: true, message: "请选二级分类", trigger: "blur" },
                title: { required: true, message: "请输入活动名称", trigger: "blur" },
                status: { required: true, message: "请选择活动状态", trigger: "blur" },
                begintime: { required: true, message: "请选择开始时间", trigger: "blur" },
                endtime: { required: true, message: "请选择结束时间", trigger: "blur" },
                goodsid: { required: true, message: "请选择活动商品", trigger: "blur" }
            },
            formLabelWidth: '120px',
            GoodArr: [],
            two: []
        }
    },
    methods: {
        ...mapActions('seckill', ['getsecklist']),
        ...mapActions('cate', ['getcatelist']),
        reset() {
            this.form = {
                title: '',
                type: '',
                url: '',
                pid: '',
                status: '',
                icon: ""
            };
            this.info.isShow = false
        },

        Second(id) {
            console.log(id);
            this.form.goodsid = "";
            this.$Api.getgoodslistbysid({ sid: id }).then(res => {
                console.log(res, 10086);
                if (res.code == 200) {
                    this.GoodArr = res.list;
                }
            })
        },
        submit() {
            this.form.begintime = new Date(this.form.begintime).getTime();
            this.form.endtime = new Date(this.form.endtime).getTime();
            // 点击提交的时候
            // 判空
            this.$refs.dialog.validate(val => {
                if (val) {
                    // console.log(this.form);
                    if (this.form.id) {
                        this.$Api.seckedit(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.getsecklist();
                                this.reset();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        this.$Api.seckadd(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.getsecklist();
                                this.reset();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                }
            })

        },
        First(id) {
            this.form.second_cateid = "";
            this.form.goodsid = "";
            let arr = this.catelist.filter(item => {
                return item.id == id;
            });
            this.two = arr[0].children;
        },
        // 回显
        Echo(obj) {
            this.form = {
                ...obj
            };
            this.First(obj.first_cateid)
            this.Second(obj.second_cateid)

        }
    }
}

</script>


<style leng='less' scoped>

</style>